<template>
  <div>
    <h1>{{count}}</h1>
    <button @click="count++">累加</button>
    <button @click="destroy">卸载</button>
  </div>
</template>

<script>
export default {
  name:'App',
  data(){
    return{
      count:1
    }
  },
  methods:{
    destroy(){
      this.$destroy()
    }
  },


    beforeUpdate(){
    console.log(this.count);
    debugger
  },
  updated() {
    console.log(this.count);
    debugger
  },

  /* 
    当组件收到销毁的指令时,会调用beforeDesstroy钩子函数
    在当前的生命周期函数中,所有的功能都是正常的!!!
    但是最好不要再修改数据了!!!
    在这个生命周期函数中一般来处理收尾的工作(关闭定时器,取消订阅,解绑自定义事件等)
  */
  beforeDestroy() {
  console.log(this);
  this.count=10;
  debugger
  },

  /* 
  在destroyed之前,vue取消了观察(数据双向绑定),并且把子组件内部的事件等等都拆除掉了
  注意:在destroyed中还是可以访问vm的,只不过是切断了vm和视图之间的联系
  */
  destroyed(){
    console.log(this);
  }
}
</script>

<style>

</style>